<template>
	<div class="index">
		<div class="mapContainer">
			<!-- 高德地图 -->
			<div id="mapGD"></div>

			<div class="index_range">
				<el-select
					@change="buildCircle(), rebuildPoint()"
					v-model="range"
					placeholder="请选择"
					size="small"
				>
					<el-option label="500m" :value="500"></el-option>
					<el-option label="1公里" :value="1000"></el-option>
					<el-option label="2公里" :value="2000"></el-option>
				</el-select>
				<el-button style="margin-left: 10px" type="primary" size="small" @click="mapHandle">
					重新加载
				</el-button>
			</div>

			<!-- 资源显示控制 -->
			<div class="resourceList_bottom" :class="resourceList_bottom_active">
				<div class="resourceList_bottom_content">
					<div class="resourceList_bottom_hide" @click="hideList">
						<i class="el-icon-d-arrow-left icon"></i>
					</div>
					<div class="cardContent">
						<div style="display: flex; padding: 10px 0">
							<div
								:class="item.activeClass"
								@click="clickResource(item)"
								v-for="(item, index) in resourceList"
								:key="index"
							>
								<div class="item_title">{{ item.title }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 资源详情 -->
			<div class="resourceDetail_right" :class="resourceDetail_right_active">
				<div class="resourceDetail_right_content">
					<div class="resourceDetail_right_content_title" @click="clickTitle">
						<span>周边资源</span>
						<span class="icon"><i class="el-icon-arrow-down"></i></span>
					</div>
					<div class="resourceDetail_right_content_list">
						<!-- 内容 -->
						<div class="content">
							<span v-if="!hasResource">暂无数据</span>
							<div v-else class="resource">
								<!-- 重点单位 -->
								<div class="unit" v-if="resource_right_info.unit.length > 0">
									<el-collapse v-model="collapse[0]">
										<el-collapse-item
											:title="`重点单位(${resource_right_info.unit.length})`"
											name="1"
										></el-collapse-item>
									</el-collapse>
								</div>
								<!-- 消防机构 -->
								<div class="organ" v-if="resource_right_info.organ.length > 0">
									<el-collapse v-model="collapse[1]">
										<el-collapse-item :title="`消防机构(${resource_right_info.organ.length})`" name="1">
											<span
												class="resource-item"
												@click="showResourceDetail(item)"
												v-for="item in resource_right_info.organ"
												:key="item.id"
											>
												{{ item.remark }}：{{ item.location }}
											</span>
										</el-collapse-item>
									</el-collapse>
								</div>
								<!-- 消火栓 -->
								<div class="hydrant" v-if="resource_right_info.hydrant.length > 0">
									<el-collapse v-model="collapse[2]">
										<el-collapse-item :title="`消火栓(${resource_right_info.hydrant.length})`" name="1">
											<span
												class="resource-item"
												@click="showResourceDetail(item)"
												v-for="(item, index) in resource_right_info.hydrant"
												:key="item.id"
											>
												消火栓 {{ index + 1 }}：{{ item.location }}
											</span>
										</el-collapse-item>
									</el-collapse>
								</div>
								<!-- 水源 -->
								<div class="water" v-if="resource_right_info.water.length > 0">
									<el-collapse v-model="collapse[3]">
										<el-collapse-item :title="`水源(${resource_right_info.water.length})`" name="1">
											<span
												class="resource-item"
												@click="showResourceDetail(item)"
												v-for="(item, index) in resource_right_info.water"
												:key="item.id"
											>
												水源 {{ index + 1 }}：{{ item.location }}
											</span>
										</el-collapse-item>
									</el-collapse>
								</div>
								<!-- 视频 -->
								<div class="video" v-if="resource_right_info.video.length > 0">
									<el-collapse v-model="collapse[4]">
										<el-collapse-item
											:title="`视频列表(${resource_right_info.video.length})`"
											name="1"
										></el-collapse-item>
									</el-collapse>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getDispatchInfoApi, getCaseLocationApi } from '@/utils/api';

export default {
	name: 'Index',
	data() {
		return {
			caseInfo: '' /* 案件信息 */,
			range: 2000 /* 半径 */,
			map: '' /* 地图实例 */,
			circle: '' /* 圆形覆盖物 */,
			fireMarkGroup: [] /* 当前发生案件点位信息 */,
			markers: '' /* 案件周边资源的点位信息 */,
			resourceList: [
				{
					title: '全部',
					activeClass: 'item_active'
				},
				{
					title: '消火栓',
					activeClass: 'item'
				},
				{
					title: '水源',
					activeClass: 'item'
				},
				{
					title: '消防机构',
					activeClass: 'item'
				},
				{
					title: '视频',
					activeClass: 'item'
				},
				{
					title: '重点单位',
					activeClass: 'item'
				}
			],
			resourceFilter: [0, 1, 2, 3, 4] /* 资源筛选 */,
			currentLng: '' /* 选中的案件精度 */,
			currentlat: '' /* 选中的案件纬度 */,
			resourceDetail_right_active: '',
			resourceList_bottom_active: '',
			resource_right_info: {
				hydrant: [],
				water: [],
				organ: [],
				video: [],
				unit: []
			} /* 周边资源信息 */,
			circleCenter: '' /* 圆心 */,
			collapse: [['1'], [], [], [], []]
		};
	},

	mounted() {
		this.init(); // vue的初始化
	},

	computed: {
		hasResource() {
			let flag = false;

			for (var key in this.resource_right_info) {
				if (this.resource_right_info[key].length > 0) {
					flag = true;
				}
			}

			return flag;
		}
	},

	methods: {
		// 初始化
		async init() {
			await this.getDisasterInfo();
			this.mapHandle(); // 地图相关操作
		},

		// 灾情信息
		async getDisasterInfo() {
			this.caseInfo = [];

			const res = await getDispatchInfoApi({
				pageNum: 1,
				pageSize: 9999,
				caseStatus: '1'
			});

			if (res.success) {
				this.caseInfo = res.data.list;
			} else {
				this.$message.error(res.msg);
			}
		},

		// 对地图的操作
		mapHandle() {
			// 创建地图
			this.map = new AMap.Map('mapGD', {
				resizeEnable: true, //是否监控地图容器尺寸变化
				zoom: 12 //初始化地图层级
			});

			this.remakeMap();
		},

		// 选择一个资源
		async clickResource(item) {
			if (!this.circleCenter || this.circleCenter.length === 0) {
				this.$message.error('还未选择案件');
				return;
			}

			if (item.title === '全部') {
				this.resourceList.map((j) => {
					if (j.title != '全部') {
						j.activeClass = 'item';
					}
				});

				item.activeClass = item.activeClass == 'item' ? 'item_active' : 'item';

				if (item.activeClass == 'item') {
					this.resourceFilter = [];
				} else {
					this.resourceFilter = [0, 1, 2, 3, 4];
				}
			} else {
				let num = 0;
				this.resourceFilter = [];
				this.resourceList[0].activeClass = 'item';
				item.activeClass = item.activeClass == 'item' ? 'item_active' : 'item';
				this.resourceList.map((j, index) => {
					if (j.activeClass == 'item_active') {
						this.resourceFilter.push(index - 1);
						num++;
					}
				});

				if (num === this.resourceList.length - 1) {
					this.resourceList.map((j) => {
						j.activeClass = 'item';
					});

					this.resourceList[0].activeClass = 'item_active';
				}
			}

			this.map.clearInfoWindow();
			this.rebuildPoint();
		},

		// 点击隐藏下方资源列表
		hideList() {
			if (this.resourceList_bottom_active) {
				this.resourceList_bottom_active = '';
			} else {
				this.resourceList_bottom_active = 'resourceList_bottom_active';
			}
		},

		// 点击周边资源Title
		clickTitle() {
			if (this.resourceDetail_right_active) {
				this.resourceDetail_right_active = '';
			} else {
				this.resourceDetail_right_active = 'resourceDetail_right_active';
			}
		},

		// 重新加载资源信息
		remakeMap() {
			// 先清除原本的圆形覆盖物 信息窗体
			this.circleCenter = [];
			this.resource_right_info = [];
			this.collapse = [['1'], [], [], [], []];
			this.map.remove(this.circle);
			this.creatMarks();
		},

		// 批量创建点标记
		creatMarks() {
			this.caseInfo.map((item) => {
				// 构造点标记
				let marker = new AMap.Marker({
					icon: require('@/assets/fire.png'),
					position: [item.longitude, item.latitude],
					anchor: 'bottom-center'
				});

				this.fireMarkGroup.push(marker);

				// 鼠标点击marker弹出自定义的信息窗体
				AMap.Event.addListener(marker, 'click', (e) => {
					if (this.circleCenter[0] === item.longitude && this.circleCenter[1] === item.latitude) {
						this.openInfo(item);
						return;
					}

					this.circleCenter = [item.longitude, item.latitude];

					this.buildCircle();
					this.rebuildPoint();
					this.openInfo(item);

					const iconGroup = document.querySelectorAll('.amap-icon');

					iconGroup.forEach((item) => {
						item.style.border = '1px solid #fff';
						item.classList.remove('animate-active');
					});

					e.target.dom.querySelector('.amap-icon').style.border = '1px solid #f50';
					e.target.dom.querySelector('.amap-icon').classList.add('animate-active');
				});
			});

			this.map.add(this.fireMarkGroup);
		},

		// 创建圆形覆盖物
		buildCircle() {
			// 先清除原本的圆形覆盖物 信息窗体
			this.map.remove(this.circle);
			this.map.clearInfoWindow();

			this.circle = new AMap.Circle({
				center: this.circleCenter,
				radius: this.range, //半径
				borderWeight: 3,
				strokeColor: '#FF33FF',
				strokeOpacity: 1,
				strokeWeight: 6,
				strokeOpacity: 0.2,
				fillOpacity: 0.3,
				strokeStyle: 'dashed',
				strokeDasharray: [10, 10],
				// 线样式还支持 'dashed'
				fillColor: '#e55f11',
				zIndex: 50
			});

			this.circle.setMap(this.map);
			// 缩放地图到合适的视野级别
			this.map.setFitView([this.circle]);
		},

		// 重新绘制点标记
		async rebuildPoint() {
			this.map.remove(this.markers);
			this.markers = [];
			this.resource_right_info = {
				hydrant: [],
				water: [],
				organ: [],
				video: [],
				unit: []
			};

			const res = await getCaseLocationApi({
				longitude: this.circleCenter[0],
				latitude: this.circleCenter[1],
				scala: this.range
			});

			if (res.success) {
				res.data.map((item) => {
					// 点标记显示内容，HTML要素字符串
					let icon = '';
					if (item.equipmentType == 0) {
						icon = require('@/assets/hydrant.png');
					} else if (item.equipmentType == 1) {
						icon = require('@/assets/water.png');
					} else if (item.equipmentType == 2) {
						icon = require('@/assets/fireOrgan.png');
					} else if (item.equipmentType == 3) {
						icon = require('@/assets/video.png');
					} else {
						icon = require('@/assets/mainUnit.png');
					}

					var markerContent = `<div class="amap-icon colorInfo">
						 <img src="${icon}">
					 </div>`;

					// 构造点标记
					let marker = new AMap.Marker({
						content: markerContent,
						position: [item.longitude, item.latitude],
						anchor: 'bottom-center'
					});

					// 鼠标点击marker弹出自定义的信息窗体
					AMap.Event.addListener(marker, 'click', () => {
						this.openInfo(item);
					});

					if (item.equipmentType == 0 && this.resourceFilter.indexOf(0) > -1) {
						this.markers.push(marker);
						this.resource_right_info.hydrant.push(item);
					} else if (item.equipmentType == 1 && this.resourceFilter.indexOf(1) > -1) {
						this.markers.push(marker);
						this.resource_right_info.water.push(item);
					} else if (item.equipmentType == 2 && this.resourceFilter.indexOf(2) > -1) {
						this.markers.push(marker);
						this.resource_right_info.organ.push(item);
					} else if (item.equipmentType == 3 && this.resourceFilter.indexOf(3) > -1) {
						this.markers.push(marker);
						this.resource_right_info.video.push(item);
					} else if (item.equipmentType == 4 && this.resourceFilter.indexOf(4) > -1) {
						this.markers.push(marker);
						this.resource_right_info.unit.push(item);
					}
				});

				console.log(this.resource_right_info, 'recource>>>>>>');
				this.map.add(this.markers);
			} else {
				this.$toast(res.msg);
			}

			if (this.resourceFilter === 0) {
			}
		},

		// 显示地图上资源位置
		showResourceDetail(item) {
			setTimeout(() => {
				this.map.setCenter([item.longitude, item.latitude]);
			});
			this.openInfo(item);
		},

		openInfo(item) {
			this.map.clearInfoWindow();

			//构建信息窗体中显示的内容
			var info = [];
			var offset = '';

			if (item.caseInfo) {
				// 案件信息
				info.push(`
								<p class='input-item'>${item.caseInfo}</p>
								<p class='input-item'>地址： ${item.caseAddress}</p>
							`);
				offset = new AMap.Pixel(5, -25);
			} else if (item.equipmentType == 0) {
				// 消火栓
				info.push(`
								<p class='input-item'>消火栓信息</p>
								<p class='input-item'>位置： ${item.location}</p>
								<p class='input-item'>设备IMEI号： ${item.imei || '--'}</p>
							`);
				offset = new AMap.Pixel(0, -35);
			} else if (item.equipmentType == 1) {
				// 水源
				info.push(`
								<p class='input-item'>水源信息</p>
								<p class='input-item'>位置： ${item.location}</p>
								<p class='input-item'>设备IMEI号： ${item.imei || '--'}</p>
							`);
				offset = new AMap.Pixel(0, -35);
			} else if (item.equipmentType == 2) {
				// 消防机构
				info.push(`
								<p class='input-item'>${item.remark || '--'}</p>
								<p class='input-item'>位置： ${item.location}</p>
							`);
				offset = new AMap.Pixel(0, -35);
			} else if (item.equipmentType == 3) {
				// 视频
				info.push(`
								<p class='input-item'>视频信息</p>
							`);
				offset = new AMap.Pixel(0, -35);
			} else {
				// 重点单位
				info.push(`
								<p class='input-item'>重点单位信息</p>
							`);
				offset = new AMap.Pixel(0, -35);
			}

			let infoWindow = new AMap.InfoWindow({
				offset,
				content: info.join('') //使用默认信息窗体框样式，显示信息内容
			});

			infoWindow.open(this.map, [item.longitude, item.latitude]);
		}
	}
};
</script>

<style scoped lang="scss">
#mapGD {
	width: 100%;
	height: 100%;
}

.mapContainer {
	position: relative;
	width: 100%;
	height: 100%;

	.resourceList_bottom {
		position: fixed;
		bottom: 20px;
		left: 30px;
		transition: transform 0.3s;

		.resourceList_bottom_content {
			height: 100%;
			font-size: 16px;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.cardContent {
				width: 100%;
				height: 100%;
				font-size: 16px;
				display: flex;
				overflow: hidden;
				transition: width 0.3s;

				.item {
					background-color: #333333;
					padding: 5px 10px;
					width: 80px;
					height: 26px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					overflow: hidden;

					&:hover {
						background-color: #535353;
					}

					.item_title {
						width: 100%;
						font-size: 14px;
						color: #fff;
						font-weight: bold;
						text-align: center;
					}
				}

				.item_active {
					background-color: #666f81;
					padding: 5px 10px;
					width: 80px;
					height: 26px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					overflow: hidden;

					.item_title {
						font-size: 15px;
						color: rgb(27, 209, 255);
						font-weight: bold;
						text-align: center;
					}
				}
			}

			.resourceList_bottom_hide {
				background-color: #333333;
				padding: 10px;
				display: flex;
				align-items: center;
				cursor: pointer;
				border-right: 1px solid #fff;
				color: #fff;

				&:hover {
					background-color: #757575;
				}

				.icon {
					transition: transform 0.3s;
				}
			}
		}
	}

	.resourceList_bottom_active {
		.icon {
			transform: rotate(180deg);
		}

		.cardContent {
			width: 0px !important;
		}
	}

	.resourceDetail_right {
		position: absolute;
		right: 30px;
		top: 20px;
		width: 340px;
		height: 93%;
		transition: height 0.3s;

		.resourceDetail_right_content {
			overflow: hidden;
			height: 100%;
			width: 100%;
			background-color: #191d2f;
			border: 1px solid #b6b6b6;
			box-shadow: 0 10px 8px rgba($color: #000, $alpha: 0.2);
			border-radius: 5px;
			position: relative;

			.resourceDetail_right_content_title {
				width: 100%;
				height: 35px;
				border-bottom: 1px solid #c3c3c3;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				font-size: 15px;
				padding-left: 20px;
				color: #fff;
				font-weight: bold;
				cursor: pointer;

				.icon {
					transition: transform 0.3s;
					position: absolute;
					right: 15px;
				}
			}
		}

		.resourceDetail_right_content_list {
			overflow-y: auto;
			color: #fff;
			height: calc(100% - 45px);
			@include xy-scroll;

			.content {
				position: relative;
				width: 100%;
				padding: 10px 0;
				background: #191d2f;
				height: calc(100% - 45px);

				& > span {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.resource-item {
				color: #eee;
				display: block;
				margin-bottom: 5px;
				font-size: 12px;
				cursor: pointer;
				line-height: 18px;

				&:hover {
					color: rgb(0, 183, 255);
					text-decoration: underline;
				}
			}
		}
	}

	.resourceDetail_right_active {
		height: 35px !important;

		.icon {
			transform: rotate(-90deg);
		}
	}
}

.index_range {
	position: absolute;
	top: 20px;
	left: 30px;
	display: flex;
	align-items: center;
}
</style>

<style lang="scss">
.index {
	height: 100vh;

	.animate-active {
		animation: flash 1s linear infinite;
	}

	@keyframes flash {
		0% {
			background-color: rgb(254, 181, 181);
		}

		25% {
			background-color: rgb(252, 170, 170);
		}

		50% {
			background-color: rgb(249, 154, 154);
		}

		75% {
			background-color: rgb(252, 170, 170);
		}

		100% {
			background-color: rgb(255, 211, 211);
		}
	}

	.el-collapse {
		margin: 5px 15px 10px;
		padding: 0 15px;
		border: 1px solid #ebeef5;
		border-radius: 3px;
	}

	.el-collapse-item__header {
		background-color: transparent !important;
		color: #fff;
		border: none;
	}

	.el-collapse-item__wrap {
		background-color: transparent !important;
		color: #fff;
	}

	.el-collapse-item__content {
		padding-bottom: 10px;
	}

	.el-checkbox {
		display: block;
		margin-right: 10px;
		padding: 5px 0;
		display: flex;
		align-items: center;

		.el-checkbox__label {
			width: 245px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.el-checkbox__input {
			margin-top: 3px;
		}
	}

	.el-select__caret.el-input__icon.el-icon-arrow-up {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.infowindow_container {
		background-color: #fff;
		padding-bottom: 26px;
		width: 285px;
		border-radius: 5px;
		border: 1px solid #d9d9d9;
		color: #323232;
		font-size: 14px;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 25% 90%, 15% 100%, 17% 90%, 0 90%);
		position: relative;

		.infowindow_title {
			padding: 10px 15px;
			font-weight: bold;
			background-color: #f9f9f9;
			border-bottom: 1px solid #eee;
		}

		.infowindow_close {
			position: absolute;
			right: 10px;
			top: 13px;
			cursor: pointer;

			img {
				height: 14px;
				width: 14px;
			}
		}

		.infoWindow_content {
			padding: 0 15px;
			font-size: 12px;

			.item {
				margin: 10px 0;
				display: flex;

				span {
					&:first-child {
						width: 80px;
					}

					&:last-child {
						flex: 1;
						color: #747474;
					}
				}
			}
		}
	}

	.input-item {
		padding: 5px 0;
		font-size: 12px;
		color: #666;
		margin: 0;
		max-width: 200px;

		&:first-child {
			font-size: 14px;
			color: #323232;
		}
	}

	.amap-icon {
		background-color: rgb(255, 211, 211);
		height: 32px !important;
		width: 32px !important;
		box-sizing: border-box;
		border: 1px solid #fff;
		box-shadow: $--xy-shadow-deep;
		border-radius: 5px;
		@include xy-dfc;
		padding: 8px;
	}

	.colorInfo.amap-icon {
		background-color: rgb(183, 210, 253);
	}
}
</style>
